<template>
	<div class="resource" direction="vertical">
		<scOverview></scOverview>
		<div class="mt_10 resource-data-conversion">
			<scSection class="resource-data" title="资源数据" :img-url="imgsList.data_icon">
				<div class="resource-data__body">
					<div class="item" v-for="(item, index) in resourceData" :key="index">
						<div class="label">
							{{ item.label }} <span class="unit">（{{ item.unit }}）</span>
						</div>
						<div class="value" :style="{ color: item.color }">
							<img class="image" :src="item.url" alt="" />
							<div class="number">{{ item.number }}</div>
						</div>
					</div>
				</div>
			</scSection>
			<scSection class="resource-conversion ml_10" title="资源转化率" :img-url="imgsList.percent_icon">
				<div class="resource-conversion__body">
					<div class="current-day">
						<scEcharts height="210px" :option="tplCurrentDayBar"></scEcharts>
					</div>
					<div class="current-month">
						<scEcharts height="210px" :option="tplCurrenMonthBar"></scEcharts>
					</div>
				</div>
			</scSection>
		</div>
		<div class="data-ranking mt_10">
			<div class="data">
				<scSection class="performance-data" title="业绩数据" :img-url="imgsList.performance_icon">
					<div class="performance-data__body">
						<div class="performance-data_left">
							<div class="item" v-for="(item, index) in performanceData" :key="index">
								<div class="label">
									<img :src="item.url" alt="" />
									<span class="title">
										{{ item.label }}
									</span>
								</div>
								<div class="value">
									<span class="number">{{ item.number }}</span>
									<span class="unit">{{ item.unit }}</span>
								</div>
							</div>
						</div>
						<div class="performance-data_right">
							<scEcharts height="235px" :option="tplPerformanceBar"></scEcharts>
						</div>
					</div>
				</scSection>
				<scSection class="channel-data mt_10" title="资源渠道月度分析" :img-url="imgsList.resource_icon">
					<scEcharts height="235px" :option="tplChannelBar"></scEcharts>
				</scSection>
			</div>
			<div class="ranking ml_10">
				<div class="title-wrapper">
					<img :src="imgsList.rank_icon" alt="" />
					<scTab v-bind="rankingData" @onSelect="handleRanking"></scTab>
				</div>
				<div class="rank__body">
					<div class="search">
						<div class="search-title title">大搜</div>
						<el-tabs type="border-card" v-model="searchCurComponent">
							<el-tab-pane v-for="item in searchTagList" :key="item.name" :label="item.label" :name="item.name">
								<div class="search_body">
									<scResourceTable v-bind="tplTableData" v-if="searchCurComponent === 'SearchSchoolNumber'">
										<template v-slot:url>
											<img class="table-img" :src="imgsList.consult_icon" alt="" />
										</template>
									</scResourceTable>
									<scResourceTable v-bind="tplTableData" v-if="searchCurComponent === 'SearchSchoolRate'">
										<template v-slot:url>
											<img class="table-img" :src="imgsList.data_icon" alt="" />
										</template>
									</scResourceTable>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
					<div class="info">
						<div class="info-title title">信息流</div>
						<el-tabs type="border-card" v-model="InfoCurComponent">
							<el-tab-pane v-for="item in InfoTagList" :key="item.name" :label="item.label" :name="item.name">
								<div class="search_body">
									<scResourceTable v-bind="tplTableData" v-if="InfoCurComponent === 'InfoSchoolNumber'">
										<template v-slot:url>
											<img class="table-img" :src="imgsList.consult_icon" alt="" />
										</template>
									</scResourceTable>
									<scResourceTable v-bind="tplTableData" v-if="InfoCurComponent === 'InfoSchoolRate'">
										<template v-slot:url>
											<img class="table-img" :src="imgsList.data_icon" alt="" />
										</template>
									</scResourceTable>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import { reactive, ref, computed, getCurrentInstance, onMounted } from "vue"
import scOverview from "@/components/scOverview"
import scSection from "@/components/scSection"
import scResourceTable from "@/components/scResourceTable"
import scEcharts from "@/components/scEcharts"
import scTab from "@/components/scTab"
import imgsList from "@/utils/images.js"
const { proxy } = getCurrentInstance()

const searchCurComponent = ref("SearchSchoolNumber")
const searchTagList = ref([
	{ label: "到校个数排行", name: "SearchSchoolNumber" },
	{ label: "到校率排行", name: "SearchSchoolRate" }
])

const InfoCurComponent = ref("InfoSchoolNumber")
const InfoTagList = ref([
	{ label: "到校个数排行", name: "InfoSchoolNumber" },
	{ label: "到校率排行", name: "InfoSchoolRate" }
])

const rankingData = reactive({
	active: "day",
	items: [
		{ label: "日排名", name: "day" },
		{ label: "周排名", name: "week" },
		{ label: "月排名", name: "month" }
	]
})

const state = reactive({
	sourceAnalysis: []
})

// 资源数据
const resourceData = reactive([
	{
		label: "咨询量",
		number: 518,
		unit: "日",
		color: "#5371E5",
		url: imgsList.consult_icon
	},
	{
		label: "有效资源",
		number: 217,
		unit: "日",
		color: "#5371E5",
		url: imgsList.valid_icon
	},
	{ label: "到校", number: 150, unit: "日", color: "#5371E5", url: imgsList.school_icon },
	{
		label: "咨询量",
		number: 85000,
		unit: "月",
		color: "#F05A5A",
		url: imgsList.consult_month_icon
	},
	{
		label: "有效资源",
		number: 9800,
		unit: "月",
		color: "#F05A5A",
		url: imgsList.valid_month_iocn
	},
	{
		label: "到校",
		number: 3800,
		unit: "月",
		color: "#F05A5A",
		url: imgsList.school_month_icon
	}
])

// 业绩数据
const performanceData = reactive([
	{ label: "成单量(日)", number: 15, unit: "人", url: imgsList.order_icon },
	{ label: "业绩(日)", number: 1500000, unit: "元", url: imgsList.money_icon },
	{ label: "成单量(月)", number: 1600, unit: "人", url: imgsList.order_icon },
	{ label: "业绩(月)", number: 2000000, unit: "元", url: imgsList.money_icon }
])

const tplCurrentDayBar = computed(() => {
	const options = {
		title: {
			text: "当日转化率",
			x: "6%",
			y: "10%",
			textStyle: {
				fontSize: 16,
				fontWeight: 800,
				color: "#666"
			}
		},
		grid: {
			left: "10%",
			right: "6%",
			bottom: "-10%",
			top: "30%",
			containLabel: true
		},
		xAxis: {
			type: "value",
			show: false
		},
		yAxis: [
			{
				type: "category",
				inverse: true,
				data: ["资源有效率", "到校率", "成单率", "资源转化率"],
				axisLine: {
					show: false
				},
				offset: 10,
				nameTextStyle: {
					fontSize: 15
				}
			},
			{
				type: "category",
				inverse: true,
				axisLabel: {
					color: "#333",
					fontSize: 14,
					fontWeight: 500,
					formatter(value) {
						return `${value}%`
					}
				},
				axisTick: "none",
				axisLine: "none",
				show: true,
				data: [5, 20, 36, 10]
			}
		],

		series: [
			{
				name: "当日转化率",
				type: "bar",
				barWidth: 14,
				showBackground: true,
				backgroundStyle: {
					borderRadius: 7,
					color: "#EEEEEE"
				},
				itemStyle: {
					borderRadius: 7,
					color: "#FF7070"
				},
				data: [5, 20, 36, 10]
			}
		]
	}
	return options
})

const tplCurrenMonthBar = computed(() => {
	const options = {
		title: {
			text: "当月转化率",
			x: "6%",
			y: "10%",
			textStyle: {
				fontSize: 16,
				fontWeight: 800,
				color: "#666"
			}
		},
		grid: {
			left: "10%",
			right: "6%",
			bottom: "-10%",
			top: "30%",
			containLabel: true
		},
		xAxis: {
			type: "value",
			show: false
		},
		yAxis: [
			{
				type: "category",
				inverse: true,
				data: ["资源有效率", "到校率", "成单率", "资源转化率"],
				axisLine: {
					show: false
				},
				offset: 10,
				nameTextStyle: {
					fontSize: 15
				}
			},
			{
				type: "category",
				inverse: true,
				axisLabel: {
					color: "#333",
					fontSize: 14,
					fontWeight: 500,
					formatter(value) {
						return `${value}%`
					}
				},
				axisTick: "none",
				axisLine: "none",
				show: true,
				data: [5, 20, 36, 10]
			}
		],

		series: [
			{
				name: "当日转化率",
				type: "bar",
				barWidth: 14,
				showBackground: true,
				backgroundStyle: {
					borderRadius: 7,
					color: "#EEEEEE"
				},
				itemStyle: {
					borderRadius: 7,
					color: "#5D78FF"
				},
				data: [5, 20, 36, 10]
			}
		]
	}
	return options
})

const tplPerformanceBar = computed(() => {
	const options = {
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070", // 修改字体颜色
			formatter: (params) => {
				let result = `${params[0].name}月份<br>`
				params.forEach((item) => {
					if (item.seriesType === "line") {
						result += `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#506EE4;"></span> ${item.seriesName} : ${item.value ?? "-"}</br>`
					} else {
						result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
					}
				})
				return result
			}
		},
		legend: [
			{
				top: "20px",
				right: "4%",
				itemHeight: 4,
				itemWidth: 18
			}
		],
		grid: {
			left: "2%",
			right: "8%",
			bottom: "6%",
			top: "30%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			name: "月份",
			nameTextStyle: {
				color: "#50576A",
				//关键代码
				padding: [30, 0, 0, -14]
			},
			data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
		},
		yAxis: {
			name: "业绩（万元）",
			type: "value"
		},
		series: [
			{
				name: "业绩金额",
				data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 10, 30],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 0, 0],
					color: "#506EE4"
				}
			},
			{
				name: "成单数",
				data: [150, 230, 224, 218, 135, 147, 260, 218, 135, 147, 100, 110],
				type: "bar",
				barWidth: 10,
				itemStyle: {
					borderRadius: [5, 5, 0, 0],
					color: "#FF7070"
				}
			}
		]
	}
	return options
})

const tplChannelBar = computed(() => {
	const options = {
		tooltip: {
			trigger: "axis",
			borderColor: "#FF7070", // 修改字体颜色
			formatter: (params) => {
				let result = `${params[0].name}<br>`
				params.forEach((item) => {
					if (item.seriesType === "line") {
						result += `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#506EE4;"></span> ${item.seriesName} : ${item.value ?? "-"}</br>`
					} else {
						result += `${item.marker} ${item.seriesName} : ${item.value ?? "-"}</br>`
					}
				})
				return result
			}
		},
		legend: [
			{
				top: "26px",
				left: "46%",
				itemHeight: 4,
				itemWidth: 18,
				data: [{ name: "咨询量", icon: "roundRect" }]
			},
			{
				top: "26px",
				left: "54%",
				itemHeight: 2,
				itemWidth: 18,
				data: [{ name: "有效资源", icon: "roundRect" }]
			}
		],
		grid: {
			left: "2%",
			right: "2%",
			bottom: "6%",
			top: "30%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			data: ["400电话", "智能客服分配", "商务通对话", "合作网站", "商务通加微信", "抖音加微信", "商务通电话", "抖音/头条表单", "接单", "合计"]
		},
		yAxis: {},
		series: [
			{
				name: "咨询量",
				data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224],
				type: "bar",
				barWidth: 22,
				itemStyle: {
					label: {
						show: true,
						position: "top",
						color: "#666"
					},
					borderRadius: 11,
					color: "#FF7070"
				}
			},
			{
				name: "有效资源",
				data: [150, 230, 224, 218, 135, 147, 260, 218, 135, 147],
				type: "line",
				symbol: "circle", //拐点样式
				symbolSize: 6, //拐点大小
				lineStyle: {
					width: 3, //折线宽度
					color: "#506EE4" //折线颜色
				},
				itemStyle: {
					color: "#fff", //拐点颜色
					borderColor: "#506EE4", //拐点边框颜色
					borderWidth: 2 //拐点边框大小
				}
			}
		]
	}
	return options
})

const tplTableData = computed(() => {
	const columns = [
		{ type: "index", label: "排名", className: "indexClass" },
		{ prop: "url", label: "头像" },
		{ prop: "name", label: "姓名", className: "cellClass" },
		{ prop: "number", label: "数量", className: "cellClass" },
		{ prop: "pre", label: "百分比", className: "cellClass" }
	]
	return {
		columns,
		showheader: false,
		tableData: Array(100)
			.fill(0)
			.map((_, i) => {
				return {
					url: "12212",
					name: `张珊${i}`,
					number: i * 100,
					pre: `${i + 1}%`
				}
			})
	}
})

onMounted(() => {
	getResourcesData()
})

const getResourcesData = async () => {
	const res = await proxy.$API.resources.resourcesData.get()
	console.log(res)
}

const handleRanking = (payload) => {
	console.log(payload)
	rankingData.active = payload.name
}
</script>
<style lang="scss">
.resource {
	padding: 15px;
	min-width: 1400px;
	img {
		width: 100%;
		height: 100%;
		display: block;
	}
	.mt_10 {
		margin-top: 10px;
	}
	.mt_10 {
		margin-top: 10px;
	}
	.ml_10 {
		margin-left: 10px;
	}
	.resource-data-conversion {
		display: flex;
		.resource-data {
			width: 43%;
			.resource-data__body {
				display: flex;
				flex-wrap: wrap;
				height: 240px;
				padding: 30px;

				.item {
					width: 33.3%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.label {
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
					.value {
						display: flex;
						margin-top: 8px;
						color: #5371e5;
						width: 100%;
						padding-left: 40px;
						img {
							width: 34px;
							height: 34px;
						}
						.number {
							font-family: Swis721 Cn BT;
							font-weight: bold;
							font-size: 30px;
							margin-left: 14px;
						}
					}
				}
			}
		}
		.resource-conversion {
			width: 57%;
			.resource-conversion__body {
				height: 240px;
				display: flex;
				.current-day,
				.current-month {
					width: 50%;
				}
				.current-day {
					position: relative;
					&::after {
						content: "";
						position: absolute;
						right: 0px;
						top: 50%;
						transform: translateY(-50%);
						width: 1px;
						height: 160px;
						background-color: #dddddd;
					}
				}
			}
		}
	}
	.data-ranking {
		display: flex;
		.data {
			width: 72%;
			.performance-data,
			.channel-data {
				height: 300px;
				min-width: 908px;
			}
			.performance-data__body {
				display: flex;
				height: 245px;
				.performance-data_left,
				.performance-data_right {
					width: 50%;
				}
				.performance-data_left {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					padding: 60px 20px;
					.item {
						display: flex;
						width: 50%;
						align-items: center;
						&:nth-child(2n-1) {
							width: 47%;
						}
						&:nth-child(2n) {
							width: 53%;
						}
						img {
							display: block;
							width: 18px;
							height: 18px;
						}
						.label {
							display: flex;
							.title {
								font-size: 14px;
								font-weight: bold;
								color: #333333;
								margin: 0px 8px 0px 8px;
							}
						}
						.value {
							.number {
								font-size: 30px;
								font-family: Swis721 Cn BT;
								color: #f05a5a;
							}
							.unit {
								font-size: 14px;
								color: #999999;
								margin-left: 4px;
							}
						}
					}
				}
			}
		}
		.ranking {
			width: 28%;
			height: 610px;
			background: #ffffff;
			border: 1px solid #dbdde4;
			border-radius: 4px;
		}
	}
	.ranking {
		.title-wrapper {
			height: 48px;
			display: flex;
			align-items: center;
			padding: 0px 20px;
			border-bottom: 1px solid #dbdde4;
			img {
				width: 18px;
				height: 18px;
			}
		}
		.rank__body {
			.title {
				height: 38px;
				line-height: 38px;
				padding-right: 20px;
				text-align: right;
				font-size: 16px;
				color: #666;
			}
			.search_body {
				height: 184px;
				overflow-y: auto;
				&::-webkit-scrollbar {
					width: 5px;
				}
				/*定义滚动条轨道内阴影+圆角*/
				&::-webkit-scrollbar-track {
					border-radius: 10px;
					background: #ddd;
					width: 1px;
				}
				/*定义滑块内阴影+圆角*/
				&::-webkit-scrollbar-thumb {
					border-radius: 10px;
					background-color: #ff7070;
					width: 5px;
				}

				.table-img {
					width: 35px;
					height: 35px;
				}
				.indexClass {
					font-size: 16px;
					font-weight: 500;
					color: #666666;
				}
				.cellClass {
					font-size: 14px;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #676e9a;
				}
			}
		}
	}
	.el-tabs {
		--el-tabs-header-height: 30px;
	}

	.el-tabs--border-card > .el-tabs__header {
		background-color: #fff;
	}
	.el-tabs--border-card {
		border-left: none;
		border-right: none;
		border-top: transparent;
	}
	.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
		color: #333333;
	}
	.el-tabs--border-card > .el-tabs__header .el-tabs__item:not(.is-disabled):hover {
		color: #333333;
	}
	.el-tabs--border-card > .el-tabs__header .el-tabs__item {
		border-top: 2px solid transparent;
	}
	.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
		border-top: 2px solid var(--el-border-color);
	}
	.el-tabs__nav-wrap {
		margin-bottom: -2px;
	}
}
</style>
